<!--
 * @Description: 安全管理
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2025-02-12
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2025-02-13
-->

<script lang="ts" setup>
  import { onMounted, reactive } from 'vue'

  import { requestDeletePosition, requestPositionList } from '/@/api/business/company/position'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'

  /** 搜索条件 */
  const searchParam = reactive({
    /** 安全类型 */
    type: null,
    /** 日期 */
    time: [],
    /** 关键字搜索 */
    keyword: '',
  })

  /** 搜索条件下拉项 */
  const searchOptions = reactive({
    /** 安全类型 */
    // type: Object.entries(accountStatusDesc).map((item) => ({ value: item[0], label: item[1] })),
    type: [
      { value: 1, label: '登录' },
      { value: 2, label: '安全' },
      { value: 3, label: '全部' },
    ],
  })

  /** 表格列配置 */
  const columns = [
    { title: '账号', dataIndex: 'account' },
    { title: '类型', dataIndex: 'type' },
    { title: '事件', dataIndex: 'event' },
    { title: '来源', dataIndex: 'source' },
    { title: '登陆地', dataIndex: 'loginPlace' },
    { title: 'IP地址', dataIndex: 'ip' },
    { title: '时间', dataIndex: 'time' },
  ]

  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<PositionListTypes.IRequest, PositionListTypes.IResponse[]>(searchParam, requestPositionList) //TODO

  // TODO
  setTimeout(() => {
    dataList.value = [
      { account: '19200****86', type: '登录/安全', event: '修改密码', source: 'IOS', loginPlace: '北京', ip: '114.114.114.114', time: '2024/10/09 10:09:09' },
      { account: '19200****86', type: '登录/安全', event: '修改密码', source: 'IOS', loginPlace: '北京', ip: '114.114.114.114', time: '2024/10/09 10:09:09' },
      { account: '19200****86', type: '登录/安全', event: '修改密码', source: 'IOS', loginPlace: '北京', ip: '114.114.114.114', time: '2024/10/09 10:09:09' },
      { account: '19200****86', type: '登录/安全', event: '修改密码', source: 'IOS', loginPlace: '北京', ip: '114.114.114.114', time: '2024/10/09 10:09:09' },
      { account: '19200****86', type: '登录/安全', event: '修改密码', source: 'IOS', loginPlace: '北京', ip: '114.114.114.114', time: '2024/10/09 10:09:09' },
      { account: '19200****86', type: '登录/安全', event: '修改密码', source: 'IOS', loginPlace: '北京', ip: '114.114.114.114', time: '2024/10/09 10:09:09' },
      { account: '19200****86', type: '登录/安全', event: '修改密码', source: 'IOS', loginPlace: '北京', ip: '114.114.114.114', time: '2024/10/09 10:09:09' },
      { account: '19200****86', type: '登录/安全', event: '修改密码', source: 'IOS', loginPlace: '北京', ip: '114.114.114.114', time: '2024/10/09 10:09:09' },
      { account: '19200****86', type: '登录/安全', event: '修改密码', source: 'IOS', loginPlace: '北京', ip: '114.114.114.114', time: '2024/10/09 10:09:09' },
      { account: '19200****86', type: '登录/安全', event: '修改密码', source: 'IOS', loginPlace: '北京', ip: '114.114.114.114', time: '2024/10/09 10:09:09' },
    ]
  }, 1500)

  onMounted(() => queryList())

  /**
   * 重置
   */
  const clear = () => {
    searchParam.type = null
    searchParam.time = []
    searchParam.keyword = ''
  }

  /**
   * 搜索
   */
  const search = async () => queryList({ current: 1 })
</script>

<template>
  <div class="ssc-list secure-list">
    <div class="ssc-search">
      <a-row :gutter="24">
        <a-col :span="5">
          <a-form-item label="安全类型">
            <a-select v-model:value="searchParam.type" allowClear :options="searchOptions.type" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="日期">
            <a-range-picker v-model:value="searchParam.time" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item label="关键字搜索">
            <a-input v-model:value="searchParam.keyword" @press-enter="queryList" allowClear placeholder="账号" :maxlength="20" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-row justify="end">
            <a-button @click="clear()">重置</a-button>
            <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div class="ssc-table">
      <div class="ssc-table-header">
        <span class="ssc-table-header-title">安全管理</span>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange" />
    </div>
  </div>
</template>

<style lang="less" scoped></style>
